<template>
  <div>
    <div class="page_box">
      <window-title title="用户管理">
        <el-button class="addBtn" @click="dialogAdd = true" style="float:right" size="small" icon="el-icon-plus">添加管理员</el-button>
      </window-title>
      <!-- 添加管理员 -->
    
      <!-- 表格 -->
      <el-table border :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}"  size="small" :data="tableData" style="width: 100%">
        <el-table-column type='index' label="序号"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-setting" @click="allocation(scope.$index)">分配权限</el-button>
            <el-button size="mini" icon="el-icon-delete"  @click="remove(scope.$index)">删除管理员</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
          <el-pagination
            background
            small
            :current-page="current_page"
            :page-size="per_page"
            layout="total, prev, pager, next, jumper"
            :total="30"
            @current-change="changePage"
          ></el-pagination>
        </div>
    </div>
    <!-- 添加管理员弹窗 -->
    <el-dialog title="添加管理员" :visible.sync="dialogAdd" width="30%">
      <el-form :rules="rulesAdd" :model="addForm" label-width="100px">
        <el-form-item label="用户名：" style="margin-bottom:20px" prop="userName">
          <el-input v-model="addForm.userName" size="mini" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="passWord">
          <el-input type="password" v-model="addForm.passWord" size="mini" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button class="search_btn" size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title";
export default {
  components: { windowTitle },
  data() {
    return {
      per_page:10,
      current_page:1,
      tableData:[
        {userName:'sffw',createTime:'2020-02-03 10:11:12'},
        {userName:'qeqdsad',createTime:'2020-02-03 10:11:12'},
      ],
      dialogAdd: false,
      addForm: {
        userName: "",
        passWord: ""
      },
      rulesAdd: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    changePage(e) {
      console.log(e)
    },
    allocation(index) {
      console.log(index)
    },
    remove(index) {
      console.log(index)
        this.$confirm('确定要删除此管理员吗', '提示', {
          confirmButtonText: '确定',
          confirmButtonClass:'search_btn',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/setting/manage/manage.css");
</style>